<template>

	<view>
		<u-toast ref="uToast1"></u-toast>
		<!-- 导航栏 -->
		<u-navbar title="个人中心" :autoBack="true" leftText="返回" :placeholder="true">
		</u-navbar>
		<u-picker :show="sexShow" ref="uPicker" :columns="sexColumns" @confirm="sexConfirm"
			@cancel="sexCancel"></u-picker>
		<!-- 主要内容 -->
		<view class="content">

			<u-cell-group :border="false">
				<u-cell title="头像" @tap="uploadImg">
					<view style="margin-right: 10px;" slot="right-icon"><u-avatar :src="imageHandle(userInfo.cover)"></u-avatar>
					</view>
				</u-cell>
				<u-cell title="昵称" @tap="$u.throttle(toPop(0), 500)" isLink :value="userInfo.name">
				</u-cell>

				<u-cell title="性别" isLink :value="sexHandle(userInfo.sex)" @tap="toPick">
				</u-cell>
				<u-cell title="邮箱" isLink :value="userInfo.email" @tap="$u.throttle(toPop(1), 500)">

				</u-cell>
				<u-cell title="手机号" :border="false" isLink :value="userInfo.telephone" @tap="$u.throttle(toPop(2), 500)">

				</u-cell>
			</u-cell-group>

		</view>

		<u-popup :show="popShow" :round="10" mode="bottom" @close="close"  :closeable="true"
			:customStyle="{backgroundColor: '#f4f4f4'}">
			<u-toast ref="uToast2"></u-toast>
			<view class="title">{{title}}</view>
			<view class="pop">
				<u-input v-model="inputValue" :placeholder="placeholder" border="surround" clearable :customStyle="{
							backgroundColor:'white'}"></u-input>
				<view class="tip" :class="tipClass">{{tip}}</view>
				<u-button type="primary" icon="checkmark" text="确定" @click="popConfirmClick"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		updateEmail,
		updateName,
		updateSex,
		updateTel,
		getUserInfo,
		updateCover
	} from '@/config/api.js'
	import config from '@/config.js'
	export default {
		data() {
			return {
				inputValue: '',
				popShow: false,
				popVal: -1,
				title: '',
				tip: '',
				tipClass: '',
				placeholder: '',
				uploadSrc: "",
				sexShow: false,
				sexColumns: [
					['男', '女'],
				],
			}
		},
		methods: {
			sexHandle(val) {
				if (val == 0) return '女'
				return '男'
			},
			toPick() {
				this.sexShow = true
			},
			sexCancel() {
				this.sexShow = false;
			},
			sexConfirm(e) {
				var sex = 0
				if (e.value[0] == '男') {
					sex = 1
				}
				updateSex({
					"sex": sex
				}).then((res) => {
					console.log(res);
					this.sexShow=false;
					this.$refs.uToast1.show({
						type: 'success',
						message: res.msg,
						duration: "1000"
					})
					getUserInfo().then((res)=>{
						this.$store.state.userInfo=res.data.userInfo;
					});
					
				}).catch(() => {
					this.$refs.uToast1.show({
						type: 'error',
						message: "网络异常",
						duration: "1000"
					})
				})

			},
			imageHandle(imgSrc) {
				return config.baseURL + imgSrc + "";
			},
			//上传头像
			uploadImg() {
				var _this = this;
				var token;
				wx.getStorage({
				  key: 'token',
				  success (res) {
					token=res.data
				  }
				})
				// #ifdef MP-WEIXIN
				wx.chooseImage({
					count: 1,
					success(res) {
						wx.uploadFile({
							/* // 拿到临时图片路径后上传到服务器，服务器将返回一个公网地址，
							届时在任意角落都将能访问到这张图片 */
							filePath: res.tempFiles[0].path, //临时文件路径
							url: config.baseURL + "/uni/upload", //填写公司的服务器地址
							name: 'file',
							timeout: 5000,
							 header: {
							    'content-type': 'multipart/form-data',
								'token':wx.getStorageSync("token")
							  },
							success(res2) {
								var data=JSON.parse(res2.data)
								updateCover(data.fileName).then((res3) => {
									if (res3.code==200) {
										_this.$store.state.userInfo.cover=data.fileName;
										_this.$refs.uToast1.show({
											type: 'success',
											message: "修改成功",
											duration: "1000"
										})
									}
								})
								
							}
						})

					}
				})
				// #endif
			},
			close() {
				this.popShow = false;
			},
			toPop(val) {
				this.inputValue = ''
				this.popVal=val;
				if (val == 0) {
					this.placeholder = '请输入名称'
					this.title = '修改昵称';
					this.tip = '以英文字母或汉字开头，限制4-16个字符'
					this.popShow = true
					this.inputValue = this.userInfo.name
				} else if (val == 1) {
					this.placeholder = '请输入邮箱'
					this.title = '修改邮箱';
					this.tip = '请输入正确的邮箱号'
					this.popShow = true
					this.inputValue = this.userInfo.email
				} else {
					this.placeholder = '请输入手机号'
					this.title = '修改手机号';
					this.tip = '请输入11位的手机号'
					this.popShow = true
					this.inputValue = this.userInfo.telephone
				}

			},
			popConfirmClick() {
				if (this.popVal == 0) {
					//修改名字
					this.tipClass="tipDefault";
					var firstVal = this.inputValue.substring(0, 1);
					var test = uni.$u.test;
					if ((test.chinese(firstVal) || test.letter(firstVal)) && uni.$u.test.rangeLength(this.inputValue, [4,
							16
						])) {
						updateName({
							"name": this.inputValue
						}).then((res) => {
							console.log(res)
							this.$refs.uToast1.show({
								type: 'success',
								message: res.msg,
								duration: "1000"
							})
							
							this.popShow=false;
							getUserInfo().then((res)=>{
								this.$store.state.userInfo=res.data.userInfo;
							});
						}).catch(() => {
							this.$refs.uToast2.show({
								type: 'error',
								message: "网络异常",
								duration: "1000"
							})
						})

					} else {
						this.tipClass = 'tipWarn';
						this.placeholder = '请输入正确要修改的昵称';
						this.$refs.uToast2.show({
							type: 'error',
							message: "请输入正确格式的昵称",
							duration: "1000"
						})
					}
				} else if (this.popVal == 1) {
					this.tipClass="tipDefault";
					//修改邮箱
					updateEmail({
						"email": this.inputValue
					}).then((res) => {
						if (res.code == 200) {
							this.$store.state.userInfo.email = this.inputValue
							this.$refs.uToast1.show({
								type: 'success',
								message: "修改成功",
								duration: "1000"
							})
							
							getUserInfo().then((res)=>{
								this.$store.state.userInfo=res.data.userInfo;
							});
							this.popShow=false;
						} else {
							this.tipClass = 'tipWarn';
							this.placeholder = '请输入正确要修改的邮箱';
							this.$refs.uToast2.show({
								type: 'error',
								message: "请输入正确格式的邮箱格式",
								duration: "1000"
							})
						}

					}).catch(() => {
						this.$refs.uToast2.show({
							type: 'error',
							message: "网络异常",
							duration: "1000"
						})
					})
				} else {
					if (uni.$u.test.mobile(this.inputValue)) {
						this.tipClass="tipDefault";
						updateTel({
							"tel": this.inputValue
						}).then((res) => {
							if (res.code == 200) {
								this.$store.state.userInfo.telephone = this.inputValue
								this.$refs.uToast1.show({
									type: 'success',
									message: res.msg,
									duration: "1000"
								})
								this.popShow=false;
								getUserInfo().then((res)=>{
									this.$store.state.userInfo=res.data.userInfo;
								});
							} else {
								this.tipClass = 'tipWarn';
								this.placeholder = '请输入正确要修改的手机号';
								this.$refs.uToast2.show({
									type: 'error',
									message: "请输入正确格式的手机号",
									duration: "1000"
								})
							}
						}).catch(() => {
							this.$refs.uToast2.show({
								type: 'error',
								message: "网络异常",
								duration: "1000"
							})
						})
					}else{
						this.tipClass = 'tipWarn';
						this.$refs.uToast2.show({
							type: 'error',
							message: "请输入正确格式的手机号",
							duration: "1000"
						})
					}
				}

			},
		},
		computed: {
			...mapState({
				userInfo: "userInfo"
			}),
		
		},
		onLoad() {
			
			
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}

	.content {
		width: 95%;
		height: auto;
		margin: 0 auto;
		background-color: white;
		margin-top: 15px;
		border-radius: 10px;
	}

	.smalltext {
		display: inline-block;
		font-size: 12px;
		font-family: '宋体';
		margin-right: 5px;
	}

	.uIcno {
		display: inline-block;
	}

	.pop {
		height: 250px;

		width: 80%;
		margin: 0 auto;
	}

	.title {
		text-align: center;
		margin: 20px 0px;
		font-weight: bold;

	}

	.tip {
		margin: 5px auto 30px;
		font-size: 15px;
		padding-left: 15px;
	}

	.tipWarn {
		color: red;
	}

	.tipDefault {
		color: black;
	}
</style>